```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Reference | 开发人员速查手册</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #3f3f46;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
        }
        .mermaid {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f4f4f5;
            color: #18181b;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.9em;
        }
        .nav-link:hover {
            color: #8b5cf6;
        }
        .btn-primary {
            background-color: #8b5cf6;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #7c3aed;
            transform: translateY(-2px);
        }
        .btn-secondary {
            background-color: white;
            color: #8b5cf6;
            border: 1px solid #8b5cf6;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background-color: #f5f3ff;
            transform: translateY(-2px);
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: #c4b5fd;
            z-index: -1;
            opacity: 0.4;
            transform: skewY(-2deg);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-book-open text-purple-600 text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-gray-900">Quick Reference</span>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="nav-link text-gray-700 hover:text-purple-600 transition-colors duration-200 font-medium">首页</a>
                    <a href="#" class="nav-link text-gray-700 hover:text-purple-600 transition-colors duration-200 font-medium">速查表</a>
                    <a href="#" class="nav-link text-gray-700 hover:text-purple-600 transition-colors duration-200 font-medium">贡献指南</a>
                    <a href="#" class="nav-link text-gray-700 hover:text-purple-600 transition-colors duration-200 font-medium">镜像站点</a>
                    <button class="btn-primary px-4 py-2 rounded-lg font-medium text-white shadow-sm">立即贡献</button>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero 区域 -->
    <section class="hero-gradient text-white py-20 md:py-32">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">开发者<span class="highlight">速查手册</span></h1>
                    <p class="text-xl md:text-2xl font-light mb-8 opacity-90">一站式技术速查表平台，为您提供多种编程语言、框架和工具的快速参考指南</p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="#features" class="btn-primary px-6 py-3 rounded-lg font-medium text-center shadow-lg">探索速查表</a>
                        <a href="#contribute" class="btn-secondary px-6 py-3 rounded-lg font-medium text-center">参与贡献</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.pixabay.com/photo/2020/02/03/10/12/programming-4815916_1280.jpg" alt="编程概念图" class="rounded-xl shadow-2xl w-full max-w-lg border-4 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- 特性介绍 -->
    <section id="features" class="py-16 md:py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">为什么选择 Quick Reference?</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">专为中文开发者打造的技术速查平台，助您快速查找开发过程中需要的关键信息</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 特性卡片 1 -->
                <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
                    <div class="feature-icon bg-purple-100 text-purple-600 mb-6">
                        <i class="fas fa-globe-asia text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">中文友好</h3>
                    <p class="text-gray-600">特别针对中文开发者优化，提供本地化内容，消除语言障碍，提升学习效率。</p>
                </div>

                <!-- 特性卡片 2 -->
                <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
                    <div class="feature-icon bg-indigo-100 text-indigo-600 mb-6">
                        <i class="fas fa-book text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">全面覆盖</h3>
                    <p class="text-gray-600">涵盖编程语言、前端技术、Node.js、工具命令、数据库及快捷键等全方位技术栈。</p>
                </div>

                <!-- 特性卡片 3 -->
                <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
                    <div class="feature-icon bg-pink-100 text-pink-600 mb-6">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">社区共建</h3>
                    <p class="text-gray-600">开放社区贡献机制，欢迎开发者共同完善内容，打造更适合中文社区的技术资源。</p>
                </div>
            </div>

            <!-- 数据可视化 -->
            <div class="mt-16">
                <h3 class="text-2xl font-bold text-gray-900 mb-6 text-center">技术栈分布概览</h3>
                <div class="mermaid">
                    pie
                        title 速查表内容分类占比
                        "编程语言" : 30
                        "前端技术" : 25
                        "Node.js" : 15
                        "工具命令" : 15
                        "数据库" : 10
                        "快捷键" : 5
                </div>
            </div>
        </div>
    </section>

    <!-- 主要内容区域 -->
    <section class="py-16 md:py-24 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row">
                <div class="md:w-2/3 md:pr-12">
                    <h2 class="text-3xl font-bold text-gray-900 mb-8">关于 Quick Reference</h2>
                    
                    <div class="prose max-w-none">
                        <p class="text-lg text-gray-700 mb-6">
                            Quick Reference 网站是一个专为开发人员提供的资源库，它包含了多种技术栈的备忘清单，是英文版 Reference 的中文版本。网站鼓励技术人员参与完善和贡献备忘清单，特别是针对中文用户的备忘清单。
                        </p>
                        
                        <div class="bg-white rounded-xl p-6 shadow-sm mb-8">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                                主要特点
                            </h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>网站提供了一个平台，供开发人员查找和分享技术栈所需的备忘清单（速查表）。</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>网站正在建设中，鼓励用户参与完善和贡献内容，特别是针对中文用户的备忘清单。</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>网站包含了多种编程语言、前端技术、Nodejs、工具、命令、数据库和快捷键等相关的快速参考资料。</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>提供了国内镜像网站列表，以解决因地理位置限制导致的访问问题。</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>鼓励用户提出添加新的备忘清单的请求，并感谢所有贡献者的宝贵贡献。</span>
                                </li>
                            </ul>
                        </div>
                        
                        <h3 class="text-2xl font-bold text-gray-900 mt-10 mb-6">部署指南</h3>
                        <p class="text-gray-700 mb-4">
                            网站提供了部署 Web 版本的方法，包括克隆 <span class="code-block">gh-pages</span> 分支代码到静态服务或使用 Docker 容器快速部署。
                        </p>
                        
                        <div class="bg-gray-800 rounded-lg p-4 mb-8 overflow-x-auto">
                            <pre class="text-gray-300 text-sm"><code># 使用 Docker 部署
docker run -d --name quickref -p 8080:80 \
  -e "SITE_TITLE=我的速查表" \
  quickref/quickref.me</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="md:w-1/3 mt-12 md:mt-0">
                    <div class="bg-white rounded-xl shadow-sm p-6 sticky top-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                            <i class="fas fa-link mr-2 text-purple-600"></i>
                            快速链接
                        </h3>
                        
                        <div class="space-y-4">
                            <a href="#" class="flex items-center text-purple-600 hover:text-purple-800 transition-colors">
                                <i class="fas fa-chevron-right mr-2 text-sm"></i>
                                官方网址
                            </a>
                            <a href="https://quickref.me/zh-CN/" target="_blank" class="flex items-center text-purple-600 hover:text-purple-800 transition-colors">
                                <i class="fas fa-chevron-right mr-2 text-sm"></i>
                                Quick Reference 中文版
                            </a>
                            <a href="#" class="flex items-center text-purple-600 hover:text-purple-800 transition-colors">
                                <i class="fas fa-chevron-right mr-2 text-sm"></i>
                                GitHub 仓库
                            </a>
                            <a href="#" class="flex items-center text-purple-600 hover:text-purple-800 transition-colors">
                                <i class="fas fa-chevron-right mr-2 text-sm"></i>
                                贡献指南
                            </a>
                        </div>
                        
                        <div class="mt-8">
                            <h4 class="font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-share-alt mr-2 text-blue-500"></i>
                                分享本站
                            </h4>
                            <div class="flex space-x-3">
                                <a href="#" class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center hover:bg-blue-200 transition-colors">
                                    <i class="fab fa-weibo"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center hover:bg-green-200 transition-colors">
                                    <i class="fab fa-weixin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition-colors">
                                    <i class="fas fa-link"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 贡献号召 -->
    <section id="contribute" class="py-16 md:py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-gradient-to-r from-purple-100 to-blue-100 rounded-2xl p-8 md:p-12 shadow-inner">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-2/3 mb-8 md:mb-0">
                        <h2 class="text-3xl font-bold text-gray-900 mb-4">加入我们，共建中文开发者社区</h2>
                        <p class="text-xl text-gray-700 mb-6">
                            Quick Reference 是一个开源项目，我们热忱欢迎所有开发者参与贡献内容，无论是修正错误、添加新内容，还是改善现有文档。
                        </p>
                        <a href="#" class="btn-primary px-6 py-3 rounded-lg font-medium inline-flex items-center shadow-lg">
                            <i class="fas fa-hand-holding-heart mr-2"></i>
                            立即参与贡献
                        </a>
                    </div>
                    <div class="md:w-1/3 flex justify-center">
                        <div class="bg-white p-6 rounded-xl shadow-md">
                            <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-star text-yellow-500 mr-2"></i>
                                贡献者福利
                            </h4>
                            <ul class="space-y-3 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>获得社区认可和感谢</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>优先体验新功能</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>参与社区活动资格</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col items-center">
                <div class="mb-6">
                    <i class="fas fa-book-open text-purple-400 text-3xl"></i>
                </div>
                <div class="text-center">
                    <p class="text-lg font-medium mb-2">技术小馆</p>
                    <p class="text-gray-400">
                        <a href="http://www.yuque.com/jtostring" target="_blank" class="hover:text-purple-300 transition-colors">http://www.yuque.com/jtostring</a>
                    </p>
                </div>
                <div class="mt-8 flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fab fa-weibo text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 初始化 Mermaid 图表
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```